/* var $image = $('#image');
$image.cropper({
  aspectRatio: 1,
  preview: $(".img-preview"),
});
 */

// 1. 初始化裁剪插件
let cropper = new Cropper($("#image")[0], {
    aspectRatio: 1, // 裁剪图层的横纵比例
    preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
})


// 点击选择按钮触发file的点击事件
$('.select').on('click', function(){
    $('#file').click()
})

// 监听file上传的change事件
$('#file').on('change', function(e){
    // console.log(e.target.files[0]); // 上传的文件对象
    const file = e.target.files[0]
    // 得到临时路径
    const str =  URL.createObjectURL(file)
    cropper.replace(str) // 让cropper重新设置图片url地址以及重新构建cropper
})
// 裁切头像确定  发送请求
$('.sure').on('click', function() {
    var canvas = cropper.getCroppedCanvas({ // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
        width: 100,
        height: 100
    });
    // base64也是字符串就是图片的url地址 但是接口中需要base64格式的图片
    var base64Str = canvas.toDataURL("image/jpeg");
    // encodeURIComponent 将上面base64格式中有些特殊字符进行转码./?==
    base64Str = encodeURIComponent(base64Str)
    console.log(base64Str);
    // 发送请求  准备api  携带参数上传头像 
})

